<template>
    <div class="container bg-gray">
        <div class="topline"></div>
        <div class="flex item-line">
            <div>
                <img src="../../assets/imgs/other/card-icon@2x.png" class="card-icon" alt="">
            </div>
            <div class="flex-con">
                <input type="tel" v-model="dataForm.solidcard" placeholder="请输入卡号" class="fz30 car-no">
            </div>
        </div>
        <div class="btn-areas">
            <div class="btn-submit" @click="doSubmit">提交</div>
        </div>
        <div class="text-center img-area">
            <img src="../../assets/imgs/other/card@2x.png" class="card-img" alt="">
        </div> 
    </div>
</template>
<script>
export default {
  data() {
    return {
      dataForm: {
        solidcard: ""
      }
    };
  },
  methods: {
    doSubmit() {
      if (this.$assert("isEmpty", this.dataForm.solidcard,'请输入卡号')) {
          return;
      }
      this.showLoading();
      this.$post('/api/user/bindsolidcard',this.dataForm).then(_=>{
          this.$router.replace('/center');
          this.$toast('绑定成功');
          this.hideLoading();
      }).catch(_=>{
           this.hideLoading();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.topline {
  height: 0.92rem;
}
.car-no {
  width: 100%;
  border: none;
  outline: none;
}
.item-line {
  background-color: #fff;
  padding: 0.3067rem 0.4rem;
}
.btn-areas {
  padding-top: 0.8133rem;
  text-align: center;
  .btn-submit {
    display: inline-block;
    width: 8.4667rem;
    height: 1.0667rem;
    line-height: 1.0667rem;
    color: white;
    font-size: 0.4267rem;
    background-image: url("../../assets/imgs/other/btn.png");
    background-size: 100% 100%;
    background-position: left top;
  }
}
.img-area {
  padding-top: 2.7867rem;
}
.card-icon {
  width: 0.9067rem;
  height: 0.7067rem;
  vertical-align: middle;
  margin-right: 0.4533rem;
}
.card-img {
  width: 8.2267rem;
  height: 5.2933rem;
}
</style>
